<template>
  <div>
    <header class="logo">
      <Logo />
    </header>
    <div class="cnt">
      <section class="modules">
        <section>
          <h2>智慧建设</h2>
          <p>
            在传统工程建造技术和建筑生产方式已经无法满足新的社会发展需求下,
            智能建造师与传统建造师共同承担着我国建筑行业新的发展方向和未来。
            随着新型建筑工业化和新型基础设施建设的不断发展和推动,
            做为新时代的工匠人才,智能建造师也将会是下一个建设时代的引领者和创造者.
          </p>

          <el-button type="primary" plain @click="gotoHome">
            进入
            <el-icon class="el-icon--right"><Right /></el-icon>
          </el-button>
        </section>
        <section>
          <h2>智慧运营</h2>
          <el-button type="primary" plain @click="open">
            进入
            <el-icon class="el-icon--right"><Right /></el-icon>
          </el-button>
        </section>
        <section>
          <h2>行政管理</h2>
          <el-button type="primary" plain>
            进入
            <el-icon class="el-icon--right"><Right /></el-icon>
          </el-button>
        </section>
        <section>
          <h2>智慧党建</h2>
          <el-button type="primary" plain>
            进入
            <el-icon class="el-icon--right"><Right /></el-icon>
          </el-button>
        </section>
      </section>
    </div>
    <footer>CopyRight @2023</footer>
  </div>
</template>

<script setup lang="ts">
import { Right } from '@element-plus/icons-vue'
import Logo from '@/layout/logo/index.vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
import { getHikSSO } from '@/api/user/index'

let userStore = useUserStore()
let $router = useRouter()
const gotoHome = () => {
  $router.push('/')
}

const open = async () => {
  let res = await getHikSSO()
  if (res.status == 200) {
    window.open(res.data)
  }
}
</script>

<style lang="scss" scoped>
@keyframes inter {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes uninter {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
$fotter-height: 100px;
.logo {
  position: fixed;
  top: 0;
  left: 0;
  background-color: $base-menu-background;
}

.cnt {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100vw;
  overflow: hidden;
  height: calc(100vh - $fotter-height);
  background-image: url('@/assets/images/sw.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  background-position: center center;

  .modules {
    display: flex;
    flex-wrap: wrap;
    width: 70%;
    height: 70%;

    section {
      margin: 10px;
      width: calc(50% - 20px);
      height: calc(50% - 20px);
      padding: 20px;
      background-color: rgba($color: #000000, $alpha: 0.2);
      border-radius: 10px;
      animation: inter 1s;

      &:nth-child(2n) {
        animation: uninter 1s;
      }
    }
  }

  section {
    color: #fff;
    font-size: 1.5rem;
  }

  h2 {
    line-height: 2;
  }
  p {
    line-height: 1.5;
    font-size: 1rem;
    white-space: pre-line;
    width: 350px;
    color: darken($color: #ffffff, $amount: 20);
    margin-bottom: 10px;
  }
}

footer {
  background: #312b2b;
  line-height: $fotter-height;
  height: $fotter-height;
  color: #fff;
  text-align: center;
  filter: brightness(90%);
}
</style>
